<template>
    <el-menu :default-openeds="opens"
            style="height: 100%;"
             background-color="rgb(48,65,86)"
             text-color="#fff"
             router
             :collapse-transition="false"
             :collapse="isCollapse"
             :unique-opened="true"
    >
        <div style="height: 60px;line-height: 60px;text-align: center;">
            <img src="../assets/logo.png" style="width: 20px;position: relative;top: 5px" alt="">
            <b style="color:white" v-show="logoTextShow">后台管理系统</b>
        </div>
        <div v-for="item in menus" :key="item.id">
            <div v-if="item.path">
                <el-menu-item :index="item.path">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
            </div>
            <div v-else>
                <el-submenu :index="item.id + ''">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.name }}</span>
                    </template>
                    <div  v-for="subItem in item.children" :key="subItem.id">
                        <el-menu-item :index="subItem.path">
                            <i :class="subItem.icon"></i>
                            <span slot="title">{{ subItem.name }}</span>
                        </el-menu-item>
                    </div>
                </el-submenu>
            </div>
        </div>
    </el-menu>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        props: {
            isCollapse: Boolean,
            logoTextShow: Boolean
        },
        data() {
            //这里存放数据
            return {
                menus: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")) : [],
                opens: localStorage.getItem("menus") ? JSON.parse(localStorage.getItem("menus")).map(v => v.id + '') : []
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {},
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
        destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        }, //如果页面有keep-alive缓存功能，这个函数会触发
    };
</script>
<style scoped>
    /*子菜单悬停颜色*/
    .el-menu-item:hover {
        background-color: #001528 !important;
    }

    /*菜单父级悬停颜色*/
    .el-submenu /deep/ .el-submenu__title:hover {
        background-color: rgb(45, 61, 81) !important;
    }

    /*.el-menu-item.is-active {*/
    /*    background-color: #001528 !important;*/
    /*}*/
    /*子菜单的背景色*/
    .el-menu-item {
        background-color: #1F2D3D
    }
</style>
